<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../css/new.css">
		<style>
			::placeholder {
			  color: #ccc;
			}
		</style>
	</head>
	<body class="register">
		<header class="mui-bar mui-bar-nav">
		  <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		  <h1 class="mui-title">外来人员注册</h1>
		</header>
		<div class="mui-content" id="registerpage">
			<div class="registerBox registerPadding">
				<div class="uploadBox">
					<div class="p-mw">身份证照片<font color="red">*</font></div>
					<div class="p-mw tishi">请上传清晰的本人身份证正反面照片</div>
					<div class="p-mw tishi">示例：</div>
					<div class="p-mw">
						<img width="20%" src="./../img/sfz_a.png">
						<img width="20%" src="./../img/sfz_b.png">
					</div>
					<div class="p-mw upload-comp">
						<div class="p-posr hasimg" v-for="(item,index) in formData.idCard">
							<img class="upload_loading" src="../sign/loading.gif" style="width: 50%;height:50%;margin:25%;opacity:0;">
							<img style="visibility: hidden;" @load="uploadessload($event)" :src="'file://'+item.fileDirectory">
							<a href="javascript:;" @click="deletePhone($event,index,'idCard')"> </a>
						</div>
						
						<div class="p-posr comp-1" data-front="1" @click.stop="choosePhoto($event,'idCard')" v-if="checkFiles(formData.idCard,1)">
							<span data-front="1">身份证正面</span>
						</div>
						<div class="p-posr comp-1" data-front="2" @click.stop="choosePhoto($event,'idCard')" v-if="checkFiles(formData.idCard,2)">
							<span data-front="2">身份证背面</span>
						</div>
					</div>
				</div><!-- end uploadBox -->
				<div class="uploadBox">
					<div class="p-mw">体检报告<font color="red">*</font></div>
					<div class="p-mw tishi">体检报告、保险、防疫码、行程码等</div>
					<div class="p-mw upload-comp">
						<div class="p-posr hasimg" v-for="(item,index) in formData.examination">
							<img class="upload_loading" src="../sign/loading.gif" style="width: 50%;height:50%;margin:25%;opacity:0;">
							<img style="visibility: hidden;" @load="uploadessload($event)" :src="'file://'+item.fileDirectory">
							<a href="javascript:;" @click="deletePhone($event,index,'examination')"> </a>
						</div>
						<div class="p-posr" @click="choosePhoto($event,'examination')"></div>
					</div>
				</div><!-- end uploadBox -->
				<div class="uploadBox">
					<div class="p-mw">工作票负责人授权书<font color="red">*</font></div>
					<div class="p-mw tishi">如承担工作票负责人，请上传授权书</div>
					<div class="upload-radio">
						<span>是</span><input v-model="hasAuthorization" name="radio1" value="1" type="radio">
						<span>否</span><input v-model="hasAuthorization" name="radio1" value="0" type="radio">
					</div>
					<div class="p-mw upload-comp" v-if="hasAuthorization == '1'">
						<div class="p-posr hasimg" v-for="(item,index) in formData.authorization">
							<img class="upload_loading" src="../sign/loading.gif" style="width: 50%;height:50%;margin:25%;opacity:0;">
							<img style="visibility: hidden;" @load="uploadessload($event)" :src="'file://'+item.fileDirectory">
							<a href="javascript:;" @click="deletePhone($event,index,'authorization')"> </a>
						</div>
						<div class="p-posr" @click="choosePhoto($event,'authorization')"></div>
					</div>
				</div><!-- end uploadBox -->
				<div class="uploadBox">
					<div class="p-mw">作业工种<font color="red">*</font></div>
					<div class="p-mw upload-job">
						<span v-for="item in jobsClass" @click="selectJob($event)" :data-value="item.value">{{item.label}}</span>
						<div style="clear: both;"></div>
					</div>
				</div><!-- end uploadBox -->
				<div class="uploadBox">
					<div class="p-mw">检验报告：<font color="red"></font></div>
					<div class="p-mw tishi">工器具、劳动防护用品合格证、检验合格报告等</div>
					<div class="p-mw upload-comp">
						<div class="p-posr hasimg" v-for="(item,index) in formData.special">
							<img class="upload_loading" src="../sign/loading.gif" style="width: 50%;height:50%;margin:25%;opacity:0;">
							<img style="visibility: hidden;" @load="uploadessload($event)" :src="'file://'+item.fileDirectory">
							<a href="javascript:;" @click="deletePhone($event,index,'special')"> </a>
						</div>
						<div class="p-posr" @click="choosePhoto($event,'special')"></div>
					</div>
				</div><!-- end uploadBox -->
				<div class="uploadBox">
					<div class="p-mw">个人特种作业证件：<font color="red"></font></div>
					<div class="p-mw tishi">作业证件（正反面）</div>
					<div class="p-mw upload-comp">
						<div class="p-posr hasimg" v-for="(item,index) in formData.certificate">
							<img class="upload_loading" src="../sign/loading.gif" style="width: 50%;height:50%;margin:25%;opacity:0;">
							<img style="visibility: hidden;" @load="uploadessload($event)" :src="'file://'+item.fileDirectory">
							<a href="javascript:;" @click="deletePhone($event,index,'certificate')"> </a>
						</div>
						<div class="p-posr" @click="choosePhoto($event,'certificate')"></div>
					</div>
				</div>
				<div class="uploadBox" style="border: 0;">
					<div class="p-mw">本人驾驶证：<font color="red"></font></div>
					<div class="p-mw tishi">请上传符合本人作业车辆的驾照照片 ，5年以上驾龄</div>
					<div class="p-mw upload-comp">
						<div class="p-posr hasimg" v-for="(item,index) in formData.drivinglicense">
							<img class="upload_loading" src="../sign/loading.gif" style="width: 50%;height:50%;margin:25%;opacity:0;">
							<img style="visibility: hidden;" @load="uploadessload($event)" :src="'file://'+item.fileDirectory">
							<a href="javascript:;" @click="deletePhone($event,index,'drivinglicense')"> </a>
						</div>
						<div class="p-posr" @click="choosePhoto($event,'drivinglicense')"></div>
					</div>
				</div><!-- end uploadBox -->
			</div>
			<div class="p-mw register-txt">* 请认真填写以上信息，确保关联组织生效</div>
			<div class="registerBox">
				<div class="upload-checkbox"><input v-model="formData.agree" name="agree" type="checkbox"><div>我已阅读并同意<a @click="notice()" href="javascript:;">《外来人员注册须知条款》</a></div></div>
				<div class="mui-input-row register-noafter">
					<div class="p-mw p-btn" @click="save">注册提交</div>
				</div>
				<div class="p-mw upload-footer"><span>已有账号，<a @click="toLogin" href="javascript:;">去登录</a></span></div>
			</div>
		</div>
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/jquery-3.2.1.min.js"></script>
		<script src="../../../js/mkeyplus.base.js"></script>
		<script src="../../../js/common.js"></script>
		<script src="../js/mkeyplus.base.js"></script>
		<script type="text/javascript" src="../../../js/vue.js"></script>
		<script src="../../../js/uuid.js"></script>
		<script src="./js/api.js"></script>
		<script src="./js/up.js?5"></script>
		<script>
			var registerWNPage = null,
			  cv = null;
			var htapi = new HTGlobal();
			mui.init();
			mui.plusReady(function() {
			  cv = plus.webview.currentWebview();console.log(cv.form);
			  registerWNPage.postData = cv.form?JSON.parse(cv.form):{};
			  registerWNPage.getJobs();
			  console.log(JSON.stringify(registerWNPage.postData));
			})
    registerWNPage = new Vue({
      el: '#registerpage',
      data: {
        tabIndex: 1,
        user: '',
        password: '',
        postData: {},
		hasAuthorization:1,
        formData: {
          idCard: [], //身份证图片列表
          examination: [], //体检报告
          authorization:[],//授权书
          special: [], //特种证件
		  certificate:[],//个人特种作业证
          tbJobClasses: [], //工作类型
          drivinglicense: [], //驾驶证
          agree: false, //是否同意
        },
        jobsClass: [] //作业类别
      },
      created: function() {
        
      },
      methods: {
		selectJob(e){
			var pe = $(e.target).parents('.upload-job'),
			list = [];
			
			if($(e.target).hasClass('selected')){
				$(e.target).removeClass('selected');
			}else{
				$(e.target).addClass('selected')
			}
			
			pe.find('.selected').each(function(){
				var val = $(this).attr('data-value');
				list.push(val);
			});
			//console.log(JSON.stringify(list));
			this.formData.tbJobClasses = list;
		},
		uploadessload(e){
			var pe = $(e.target).parents('.hasimg');
			pe.find('.upload_loading').remove();
			pe.find('img').css('visibility','inherit');
		},
		checkFiles(list,type){
			return !list.some(function(item){return item.front==type});
		},
        notice(){
          mui.openWindow({
            url: './notice.html',
            id: './notice.html',
            extras: {
            }
          })
        },
        privacy(){
          mui.openWindow({
            url: '../../login/Privacy.html',
            id: '../../login/Privacye.html',
            extras: {
            }
          })
        },
		toLogin(){
			mui.openWindow({
			  url: './login_ext.html',
			  id: './login_ext.html',
			  extras: {
				
			  }
			});
		},
        next() {
          mui.openWindow({
            url: '../home.html',
            id: '../home.html',
            extras: {
              network: 0
            }
          });
        },
        choosePhoto(e, listkey) {
          var _this = this;
		  var _front = e.target.getAttribute('data-front')||false;
		  
          page.setConf({
            server: mui.baseWApp.serverUrl + htapi.apiUrl.ext.upload,
            //server:'http://localhost/upload.php',
            postkey: 'fileData',
            callback: function(res) {
              if (res.data) {
                var data = res.data;
                data.fileDirectory =  res.path;
				//data.fileDirectory = htapi.filePath + data.id;
				if(_front)data.front=_front;
                //添加到数组
                _this.formData[listkey].push(data);
              }
            }
          });
          page.imgUp();
        },
        deletePhone(e, i, listkey) {
          this.formData[listkey].splice(i, 1);
        },
        getJobs() {
          console.log(mui.baseWApp.serverUrl,1111)
          //获取工种
          var _this = this;
          htapi.getDictList({dictName:'Job_type'}, function(data) {
            if (data.code == '0') {
              console.log('工种' + JSON.stringify(data))
              if (data.data) {
                _this.jobsClass = data.data;
                //console.log(_this.jobsClass);
              }
            }
          });

        },
        verificationForm() {
          //验证提交
          var _this = this;

          var formData = this.formData,
            bAppUserFileDTOS = [],
            tbJobClasses = [];

          formData.tbJobClasses.map(function(item) {
            var a = _this.jobsClass.filter(function(itemc) {
              return itemc.id == item;
            });
            if (a[0])
              tbJobClasses.push(a[0]);
          });
          _this.postData.tbJobClasses = tbJobClasses;
          //console.log(JSON.stringify(tbJobClasses));return;
          if(formData.idCard.length<2){
          	mui.toast('请上传身份证正反面照片！');
          	return false;
          }
		  if(formData.examination.length<1){
		  	mui.toast('请上传体检报告！');return false;
		  }
		  if(formData.tbJobClasses.length<1){
			  mui.toast('至少选择一个作业类别！');return false;
		  }
		  if(formData.special.length<1){
		  	//mui.toast('请上传作业证！');return false;
		  }
		  if(formData.drivinglicense.length<1){
		  	//mui.toast('请上传驾驶证！');return false;
		  }
		  if(_this.hasAuthorization=='1' && formData.authorization.length<1){
			  mui.toast('请上传负责人授权书！');return false;
		  }
		  if(_this.hasAuthorization!='0'){
			  this.cleFi(bAppUserFileDTOS,formData.authorization,1);
		  }
		  if(!formData.agree){
		  	mui.toast('请选择同意注册条款！'); return false;
		  }
          this.cleFi(bAppUserFileDTOS,formData.idCard,3);
          
          this.cleFi(bAppUserFileDTOS,formData.examination,4);
          
          this.cleFi(bAppUserFileDTOS,formData.special,5);
          
          this.cleFi(bAppUserFileDTOS,formData.drivinglicense,6);
		  
		  this.cleFi(bAppUserFileDTOS,formData.certificate,2);
          
          this.postData.tbAppUserFileDTOS=bAppUserFileDTOS;
          return true;
        },
        cleFi(arr1, arr2, type) {
          //清洗数据
          arr2.map(function(item) {
            item['type'] = type;
            //delete item['fileDirectory'];
            delete item['fileSize'];
            arr1.push(item);
            return item;
          });
          return arr1;
        },
        save() {
          //提交
          var rs = this.verificationForm();
		  var fs2 = JSON.stringify(this.formData);
          if (rs) {
           
            //console.log(JSON.stringify(this.postData));
            this.postData.sex = parseInt(this.postData.sex);
			this.postData.isLeader = this.hasAuthorization==1?1:0
			//console.log(this.postData.tbJobClasses);
			//return;
            //this.postData.tbAppUserFileDTOS = [];
            htapi.register(this.postData,
              function(data) {
                //提交注册数据等待接口返回
                if(data.code=='0'){
				mui.alert('新注册账号需要通过审核后才能登录！请联系相关场站人员对您的账号进行审核！', '注册成功', function(){
				    mui.openWindow({
				      url: './login_ext.html',
				      id: 'login_ext.html'
				    });
					setTimeout(function(){
						plus.webview.currentWebview().close('none')
					},1000)
				});
				 this.formData = JSON.parse(fs2);
                }else{
                  //mui.toast(JSON.stringify(data))
				  mui.toast(data.msg);
                }
              });
          }
        }

      }
    })			
		</script>
	</body>
</html>
